<template>
  <div class="font-inter text-dark">
    <!-- 主内容区 -->
    <div class="container">
      <!-- 页面标题 -->
      <div class="mb-8">
        <h2 class="text-[clamp(1rem,1.5vw,1.5rem)] font-bold text-dark mb-2">海报管理</h2>
        <p class="text-gray-500">上传、编辑和管理您的小红书推广海报</p>
      </div>

      <!-- 操作栏 -->
      <div
          class="bg-white rounded-xl p-4 shadow-sm mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div class="flex flex-wrap items-center gap-3">
          <button @click="showUploadDialog"
                  class="px-5 py-2 bg-red-500 text-white rounded-lg shadow-sm hover:bg-primary/90 transition-all duration-200 flex items-center gap-2">
            <i class="fa fa-upload"></i>
            <span>上传海报</span>
          </button>

          <div class="absolute top-3 right-3 flex gap-2">
            <button @click="editPoster(poster)"
                    class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
              <i class="fa fa-pencil"></i>
            </button>
            <button @click="deletePoster(poster)"
                    class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
              <i class="fa fa-trash"></i>
            </button>
          </div>
          <div class="relative">
            <select
                class="appearance-none pl-4 pr-10 py-2 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all duration-200">
              <option>全部类别</option>
              <option>美妆</option>
              <option>时尚</option>
              <option>美食</option>
              <option>旅行</option>
              <option>生活方式</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
          </div>

          <div class="relative">
            <select
                class="appearance-none pl-4 pr-10 py-2 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all duration-200">
              <option>最近上传</option>
              <option>最早上传</option>
              <option>最多使用</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
          </div>
        </div>

        <div class="flex items-center gap-3">
          <button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all duration-200">
            <i class="fa fa-th-large text-gray-600"></i>
          </button>
          <button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all duration-200">
            <i class="fa fa-list text-gray-600"></i>
          </button>
        </div>
      </div>

      <!-- 海报列表 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 海报卡片 1 -->
        <!-- 海报卡片模板 -->
        <div
            v-for="poster in posters"
            :key="poster.id"
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover-scale">
          <div class="relative">
            <img :src="poster.imageUrl" :alt="poster.title" class="w-full h-64 object-cover">
            <div class="absolute top-3 right-3 flex gap-2">
              <button @click.stop="editPoster(poster)"
                      class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-pencil"></i>
              </button>
              <button @click.stop="deletePoster(poster)"
                      class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-trash"></i>
              </button>
            </div>
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
              <span class="text-white text-sm font-medium">{{ poster.category }}</span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-medium text-dark mb-2 line-clamp-1">{{ poster.title }}</h3>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-calendar-o mr-1"></i>
                <span>{{ poster.createTime }}</span>
              </div>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-eye mr-1"></i>
                <span>{{ poster.views }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 海报卡片 2 -->
        <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover-scale">
          <div class="relative">
            <img src="https://picsum.photos/400/500?random=2" alt="时尚海报" class="w-full h-64 object-cover">
            <div class="absolute top-3 right-3 flex gap-2">
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-trash"></i>
              </button>
            </div>
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
              <span class="text-white text-sm font-medium">时尚</span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-medium text-dark mb-2 line-clamp-1">春季新品穿搭指南</h3>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-calendar-o mr-1"></i>
                <span>2023-05-20</span>
              </div>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-eye mr-1"></i>
                <span>312</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 海报卡片 3 -->
        <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover-scale">
          <div class="relative">
            <img src="https://picsum.photos/400/500?random=3" alt="美食海报" class="w-full h-64 object-cover">
            <div class="absolute top-3 right-3 flex gap-2">
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-trash"></i>
              </button>
            </div>
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
              <span class="text-white text-sm font-medium">美食</span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-medium text-dark mb-2 line-clamp-1">周末烘焙食谱分享</h3>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-calendar-o mr-1"></i>
                <span>2023-04-10</span>
              </div>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-eye mr-1"></i>
                <span>189</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 海报卡片 4 -->
        <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover-scale">
          <div class="relative">
            <img src="https://picsum.photos/400/500?random=4" alt="旅行海报" class="w-full h-64 object-cover">
            <div class="absolute top-3 right-3 flex gap-2">
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-trash"></i>
              </button>
            </div>
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
              <span class="text-white text-sm font-medium">旅行</span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-medium text-dark mb-2 line-clamp-1">日本东京自由行攻略</h3>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-calendar-o mr-1"></i>
                <span>2023-03-05</span>
              </div>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-eye mr-1"></i>
                <span>423</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 海报卡片 5 -->
        <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover-scale">
          <div class="relative">
            <img src="https://picsum.photos/400/500?random=5" alt="生活方式海报" class="w-full h-64 object-cover">
            <div class="absolute top-3 right-3 flex gap-2">
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-trash"></i>
              </button>
            </div>
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
              <span class="text-white text-sm font-medium">生活方式</span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-medium text-dark mb-2 line-clamp-1">极简主义居家布置</h3>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-calendar-o mr-1"></i>
                <span>2023-02-20</span>
              </div>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-eye mr-1"></i>
                <span>276</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 海报卡片 6 -->
        <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover-scale">
          <div class="relative">
            <img src="https://picsum.photos/400/500?random=6" alt="美妆海报" class="w-full h-64 object-cover">
            <div class="absolute top-3 right-3 flex gap-2">
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="p-2 bg-white/80 rounded-full hover:bg-white transition-all duration-200 text-gray-700">
                <i class="fa fa-trash"></i>
              </button>
            </div>
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
              <span class="text-white text-sm font-medium">美妆</span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-medium text-dark mb-2 line-clamp-1">秋冬口红推荐合集</h3>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-calendar-o mr-1"></i>
                <span>2023-01-15</span>
              </div>
              <div class="flex items-center text-sm text-gray-500">
                <i class="fa fa-eye mr-1"></i>
                <span>356</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 上传占位卡片 -->
        <div
            class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col items-center justify-center bg-white hover:border-primary transition-all duration-300 cursor-pointer group">
          <div
              class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-all duration-300">
            <i class="fa fa-cloud-upload text-primary text-2xl"></i>
          </div>
          <h3 class="text-lg font-medium text-gray-700 mb-2">上传新海报</h3>
          <p class="text-sm text-gray-500 text-center mb-4">点击或拖拽文件到此处上传</p>
          <p class="text-xs text-gray-400">支持 JPG, PNG 格式，最大 10MB</p>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog
        title="上传海报"
        :visible.sync="uploadDialogVisible"
        width="50%"
        @close="closeUploadDialog">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="海报标题">
          <el-input v-model="uploadForm.title" placeholder="请输入海报标题"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="uploadForm.category" placeholder="请选择分类">
            <el-option
                v-for="item in categories"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
              type="textarea"
              v-model="uploadForm.description"
              placeholder="请输入海报描述"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :multiple="false"
              name="image"
              :headers="Authorization"
              :on-success="handleUploadSuccess"
              :before-upload="beforeUpload"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="closeUploadDialog">取 消</el-button>
    <el-button type="primary" @click="uploadPoster">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getCookie} from '@/utils/cookies';

export default {
  name: "ManagementView",
  layout: "admin",
  data() {
    return {
      total: 10,
      searchKeyword: '',
      selectedCategory: '',
      sortType: 'latest',
      currentPage: 1,
      pageSize: 6,
      uploadDialogVisible: false,
      uploadForm: {
        title: '',
        category: '',
        description: ''
      },
      fileList: [],
      uploadUrl: '/api/upload/poster',
      categories: [
        {value: '', label: '全部类别'},
        {value: 'beauty', label: '美妆'},
        {value: 'fashion', label: '时尚'},
        {value: 'food', label: '美食'},
        {value: 'travel', label: '旅行'},
        {value: 'lifestyle', label: '生活方式'}
      ],
      posters: [
        {
          id: 1,
          title: '夏日妆容教程海报',
          category: '美妆',
          imageUrl: 'https://picsum.photos/400/500?random=1',
          createTime: '2023-06-15',
          views: 248
        },
        {
          id: 2,
          title: '春季新品穿搭指南',
          category: '时尚',
          imageUrl: 'https://picsum.photos/400/500?random=2',
          createTime: '2023-05-20',
          views: 312
        },
        {
          id: 3,
          title: '周末烘焙食谱分享',
          category: '美食',
          imageUrl: 'https://picsum.photos/400/500?random=3',
          createTime: '2023-04-10',
          views: 189
        },
        {
          id: 4,
          title: '日本东京自由行攻略',
          category: '旅行',
          imageUrl: 'https://picsum.photos/400/500?random=4',
          createTime: '2023-03-05',
          views: 423
        },
        {
          id: 5,
          title: '极简主义居家布置',
          category: '生活方式',
          imageUrl: 'https://picsum.photos/400/500?random=5',
          createTime: '2023-02-20',
          views: 276
        },
        {
          id: 6,
          title: '秋冬口红推荐合集',
          category: '美妆',
          imageUrl: 'https://picsum.photos/400/500?random=6',
          createTime: '2023-01-15',
          views: 356
        },
        {
          id: 7,
          title: '健身穿搭灵感',
          category: '时尚',
          imageUrl: 'https://picsum.photos/400/500?random=7',
          createTime: '2022-12-10',
          views: 298
        },
        {
          id: 8,
          title: '意式咖啡制作指南',
          category: '美食',
          imageUrl: 'https://picsum.photos/400/500?random=8',
          createTime: '2022-11-05',
          views: 215
        }
      ],
    }
  },
  computed: {
    Authorization() {
      return {Authorization: 'Bearer ' + getCookie('authToken')}
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传海报图片只能是 JPG/PNG 格式!');
      }
      if (!isLt10M) {
        this.$message.error('上传海报图片大小不能超过 10MB!');
      }
      return isJPG && isLt10M;
    },
    handleUploadSuccess(res) {
      this.uploadForm.imageUrl = res.url;
      this.$message.success('图片上传成功!');
    },
    editPoster(poster) {
      this.uploadDialogVisible = true;
      this.uploadForm = {
        title: poster.title,
        category: poster.category,
        description: poster.description || ''
      };
      this.editingPosterId = poster.id;
    },
    async fetchPosters() {
      try {
        const response = await this.$axios.get('/api/posters', {
          params: {
            page: this.currentPage,
            limit: this.pageSize
          }
        });
        this.posters = response.data.posters;
        this.total = response.data.total;
      } catch (error) {
        console.error('获取海报列表失败:', error);
      }
    },
    async uploadPoster() {
      try {
        const formData = new FormData();
        formData.append('image', this.fileList[0]);
        formData.append('title', this.uploadForm.title);
        formData.append('description', this.uploadForm.description);

        const response = await this.$axios.post('/api/posters', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        this.posters.unshift(response.data);
        this.$message.success('海报上传成功!');
      } catch (error) {
        console.error('上传海报失败:', error);
      }
    },
    async deletePoster(poster) {
      try {
        await this.$axios.delete(`/api/posters/${poster.id}`);
        this.posters = this.posters.filter(p => p.id !== poster.id);
        this.$message.success('删除成功!');
      } catch (error) {
        console.error('删除海报失败:', error);
      }
    },
    async handleUpload() {
      if (this.fileList.length === 0) {
        this.$message.error('请选择要上传的图片');
        return;
      }

      try {
        const formData = new FormData();
        formData.append('image', this.fileList[0]);

        const response = await this.$axios.post('/api/upload/poster', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        this.uploadForm.imageUrl = response.data.url;
        this.$message.success('图片上传成功!');
      } catch (error) {
        console.error('上传图片失败:', error);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchPosters();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchPosters();
    },
    searchPosters() {
      this.currentPage = 1;
      this.fetchPosters();
    },
    showUploadDialog() {
      this.uploadDialogVisible = true;
    },
    closeUploadDialog() {
      this.uploadDialogVisible = false;
      this.uploadForm = {
        title: '',
        category: '',
        description: ''
      };
      this.fileList = [];
    },
  },
  mounted() {
    this.fetchPosters();
  }
}
</script>

<style scoped lang="scss">


/* 分页区域 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .card-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .hover-scale {
    transition: transform 0.3s ease;
  }

  .hover-scale:hover {
    transform: scale(1.03);
  }
}
</style>
